require('../../assets/css/reset.css');
require('../../assets/css/property.css');
require('../home/home.less');
require('../../assets/fonts/font_385/iconfont.css');
//加载公共样式
require('../../assets/css/index.less')

// 引用swiper的css
require('swiper')

// 引入swiper
const mySwiper = require('swiper/dist/css/swiper.min.css')

//引入tabbar渲染函数
const renderTabbar = require('../../assets/utils/tabbar')

//获取axios工具函数
const request = require('../../assets/utils/request')

window.onload = () => {
    // 渲染renderTabbar
    renderTabbar()

    //获取dom
    const rankNo = document.querySelector('#rankNo')
    const clock = document.querySelector('#clock')
    const clockDay = document.querySelector('#clockDay')
    const badge = document.querySelector('#badge')

    // 使用swiper
    let mySwiper = new Swiper('.swiper-container', {
        autoplay: 1000,//可选选项，自动滑动
        initialSlide: 0,
        pagination: '.swiper-pagination',
        loop: true,
    })

    //获取打卡信息
    function getClockInfo() {
        request.get('/api/user/clockInInfo').then(res => {
            //解构数据
            let { errno, data } = res.data
            //判断
            if (errno === 0) {
                console.log('data.isClockIn :>> ', data.isClockIn)
                if (data.isClockIn) {
                    clock.textContent = '已打卡'
                    clock.className = 'clocked'
                } else {
                    clock.textContent = '今日打卡'
                    clock.className = 'clock'
                }
            }
        })
    }

    //初始化调用一次
    getClockInfo()

    //获取用户信息
    function getUserInfo() {
        request.get('/api/user/info').then(res => {
            //1 解构数据
            let { errno, data } = res.data
            //2 判断
            if (errno === 0) {
                //3 处理业务逻辑
                render(data)
            }
        })
    }

    //渲染函数 渲染dom更新dom
    function render(data) {
        rankNo.textContent = data.ranking
        clockDay.textContent = data.clockCount
        badge.textContent = data.badges
    }

    //初始化调用一次
    getUserInfo()


    //点击打卡
    clock.addEventListener('click', () => {
        request.post('/api/user/clockIn').then(res => {
            console.log('res.data :>> ', res.data)
            //解构数据
            let { errno, message } = res.data
            //判断
            if (errno === 0) {
                //打卡成功 重新请求数据 自动渲染
                getUserInfo()
                getClockInfo()
            } else {
                alert(message)
            }
        })
    })
}



